<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D5渲染器会员激活</title>
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .login-container {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 400px;
        text-align: center;
    }
    h2 {
        color: #333;
        font-size: 1.5em;
        margin-bottom: 20px;
    }
    .form-group {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    label {
        flex-shrink: 0;
        margin-right: 10px;
    }
    input[type="text"],
    input[type="password"] {
        flex-grow: 1;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    button {
        width: 100%;
        padding: 10px;
        margin-top: 10px;
        border: none;
        border-radius: 4px;
        background-color: #ff69b4;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    button:hover {
        background-color: #ff3399;
    }
    button:disabled {
        background-color: #ccc;
    }
    button:disabled:hover {
        background-color: #ccc;
    }
    .attribution {
        margin-top: 10px;
        font-size: 0.8em;
        color: #666;
    }
</style>
</head>
<body>
<div class="login-container">
    <h2>D5渲染器会员激活</h2>
    <form id="loginForm">
        <div class="form-group">
            <label for="username">账号：</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" required>
        </div>
        <button type="button" onclick="login()">登录</button>
    </form>
    <button id="activateMembershipButton" disabled>激活会员</button>
    <div class="attribution">
        by: 鹅鹅鹅
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script> 
<script>
    let token = ''; // 用于存储token值

    function md5(message) {
        return CryptoJS.MD5(message).toString();
    }

    function login() {
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        var md5Password = md5(password);

        var loginData = JSON.stringify({
            "phoneNumber": username,
            "password": md5Password,
            "loginType": 0
        });

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://cn.api.d5render.com/user-center/auth/webLogin', true);
        xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                var response = JSON.parse(xhr.responseText);
                if (response.msg === "success") {
                    alert('登录成功！');
                    token = response.data.token;
                    document.getElementById('activateMembershipButton').disabled = false;
                } else {
                    alert('登录失败：' + response.msg);
                }
            }
        };
        xhr.onerror = function() {
            alert('请求遇到错误。');
        };
        xhr.send(loginData);
    }

    function activateMembership() {
        if (!token) {
            alert('请先登录！');
            return;
        }

        var questionnaireData = JSON.stringify({
            "industry":["1"],
            "workflow":["1"],
            "orgName":"我是个人工作者",
            "orgRole":"1",
            "questionnaire":"{\"1\":[\"1\"],\"2\":[\"1\"],\"3\":[\"0-3年\"],\"4\":[\"1\"],\"5\":[\"我是个人工作者\"],\"6\":[\"Bilibili\"],\"7\":[\"Lumion\"]}"
        });

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://cn.api.d5render.com/user-center/questionnaire/personalization', true);
        xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
        xhr.setRequestHeader('Authorization', token);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                var response = JSON.parse(xhr.responseText);
                if (xhr.status === 200) {
                    if (response.msg === "success") {
                        alert('激活成功！');
                    } else if (response.msg === "你已参与过调研问卷") {
                        alert('激活失败：该账号已激活过');
                    } else {
                        alert('激活失败：' + response.msg);
                    }
                } else {
                    alert('激活请求失败，状态码：' + xhr.status);
                }
            }
        };
        xhr.onerror = function() {
            alert('激活请求遇到错误。');
        };
        xhr.send(questionnaireData);
    }

    document.getElementById('activateMembershipButton').addEventListener('click', activateMembership);
</script>
</body>
</html>